import { useRef } from "react";

/**
 * 1、可以通过原生js获取dom对象
 * 2、通过useRef创建一个容器，绑定在元素的ref={}属性上
 *    - 此后就可以通过容器获取到dom元素。{ current:xxx },xxx就为dom元素
 */

const App = () => {
  // 创建一个容器。钩子函数不能在事件中使用,例如放在getDomHandler方法中，会报错
  const h1Ref = useRef();

  const getDomHandler = () => {
    // const h1 = document.getElementById("myh1");
    // h1.innerText = "我变啦";
    // console.log("h1:", h1);

    const { current } = h1Ref;
    console.log("h1Ref:", h1Ref);
    console.log("通过ref获取dom:", current);
    current.innerText = "我也变啦";
  };

  return (
    <div>
      <h1 id="myh1" ref={h1Ref}>
        我是h1
      </h1>
      <button onClick={getDomHandler}>获取dom</button>
    </div>
  );
};

export default App;
